<template>
  <el-menu

      class="el-menu-vertical-demo"
      :collapse="isClose"

      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
  >
<!--      @open="handleOpen"
      @close="handleClose"-->
    <el-menu-item>
      <template #title >
        <el-icon><Shop /></el-icon>
        <span>球鞋回收后台管理</span>
      </template>
    </el-menu-item>

    <el-menu-item  index="/manager/">
      <el-icon><House /></el-icon>
      <template #title >
        系统首页
      </template>
    </el-menu-item>
    <el-sub-menu index="/manager/user">
      <template #title>
<!--        <el-icon><location /></el-icon>-->
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/manager/user/merchant">
        <el-icon><UserFilled /></el-icon>
        <template #title>入驻商家</template>
      </el-menu-item>
      <el-menu-item index="/manager/user/normalUser" >
        <el-icon><UserFilled /></el-icon>
        <template #title>普通用户</template>
      </el-menu-item>

      <el-menu-item index="1-3" disabled >
        <el-icon><icon-menu /></el-icon>
        <template #title>管理员</template>
      </el-menu-item>
    </el-sub-menu>

<!--    <el-sub-menu index="1">-->
<!--      <template #title>-->
<!--        <el-icon><location /></el-icon>-->
<!--        <span>用户管理</span>-->
<!--      </template>-->
<!--      <el-menu-item-group>-->
<!--&lt;!&ndash;        <template #title><span>用户</span></template>&ndash;&gt;-->
<!--        <el-menu-item index="1-1">入驻商家</el-menu-item>-->
<!--        <el-menu-item index="1-2">普通用户</el-menu-item>-->
<!--        <el-menu-item index="1-3" disabled>管理员</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-menu-item-group title="Group Two">-->
<!--        <el-menu-item index="1-3">item three</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-sub-menu index="1-4">-->
<!--        <template #title><span>管理员</span></template>-->
<!--        <el-menu-item index="1-3-1">item one</el-menu-item>-->
<!--      </el-sub-menu>-->
<!--    </el-sub-menu>-->
      <el-sub-menu index="/manager/order">
        <template #title>
          <el-icon><Tickets /></el-icon>
          <span>订单管理</span>
        </template>
        <el-menu-item index="/manager/order/orderList">
          <el-icon><List /></el-icon>
          <template #title>商品订单</template>
        </el-menu-item>
    </el-sub-menu>

<!--    <el-menu-item index="3" disabled>-->
<!--      <el-icon><document /></el-icon>-->
<!--      <template #title>Navigator Three</template>-->
<!--    </el-menu-item>-->
<!--    <el-sub-item index="3">-->
<!--      <el-icon><setting /></el-icon>-->
<!--      <template #title>字典管理</template>-->
<!--    </el-sub-item>-->

    <el-sub-menu index="/manager/items">
      <template #title>
        <el-icon><Present /></el-icon>
        <span>商品管理</span>
      </template>
      <el-menu-item  index="/manager/items/itemList">
        <el-icon><GoodsFilled /></el-icon>
        <template #title>商品信息</template>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="/manager/dictionary">
      <template #title>
        <el-icon><Notebook /></el-icon>
        <span>字典管理</span>
      </template>
      <el-menu-item index="/manager/dictionary/dictionaryList">
        <el-icon><Management /></el-icon>
        <template #title>字典</template>
      </el-menu-item>
    </el-sub-menu>

  </el-menu>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 直接在顶层声明 props，Vue 会自动识别
defineProps(['isClose']);

const route = useRoute();
const router = useRouter();

onMounted(() => {
  // 当组件挂载完成后，立即跳转到系统首页
  if (route.path !== '/manager/') {
    router.push('/manager/');
  }
});

console.log(route);
</script>

<!-- 模板代码保持不变，这里省略 -->
<!--<script>-->
<!--import {ref, onMounted} from "vue";-->
<!--import {useRoute,useRouter} from "vue-router"-->

<!--export default {-->
<!--  props:['isClose'],-->

<!--  setup() {-->
<!--    // const isCollapse = ref(false); // 使用 ref 定义响应式状态-->
<!--    const route = useRoute()-->
<!--    const router = useRouter()-->


<!--    onMounted(() => {-->
<!--      // 当组件挂载完成后，立即跳转到系统首页-->
<!--      if (route.path !== '/manager/') {-->
<!--        router.push('/manager/');-->
<!--      }-->
<!--    });-->
<!--    console.log(route);-->


<!--    return {-->
<!--      route,-->

<!--    };-->
<!--  }-->
<!--};-->

<!--</script>-->

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}


</style>